<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.4.4.js"></script>
<style>
#big {
	width:512px;
	height:384px;
	float:left;
	border-style:solid;
	border-color:#CCCCCC;
	border-width:6px 3px 6px 6px;
}

#small {
	width:170px;
	height:384px;
	float:left;
}

#small_0 {
	width:170px;
	height:128px;
	border-style:solid;
	border-color:#CCCCCC;
	border-width:3px 3px 0px 3px;
}

#small_1 {
	width:170px;
	height:128px;
	border-style:solid;
	border-color:#CCCCCC;
	border-width:3px 3px 0px 3px;
	filter:alpha(opacity=50);
	opacity:0.5;
}

#small_2 {
	width:170px;
	height:128px;
	border-style:solid;
	border-color:#CCCCCC;
	border-width:3px 3px 3px 3px;
	filter:alpha(opacity=50);
	opacity:0.5;
}

</style>
<title>jQuery练习</title>
</head>

<body>
	<div>&nbsp;</div>
	<div id="img_show"></div>
	<script>
		$(document).ready(function () {
			var img_loop = new imgShow("img_show", ["1.jpg", "2.jpg", "3.jpg"], ["1.jpg", "2.jpg", "3.jpg"]);
			img_loop.startShow();
		});
		
		function imgShow(div_id, imgs_big, imgs_small) {
			this.div_id = div_id;
			this.imgs_big = imgs_big;
			this.imgs_small = imgs_small;
			this.index = 0;
			this.timeout = -1;
			this.init();
		}
		
		imgShow.prototype.init = function() {
			$("#" + this.div_id).html('<div id="big"><img id="img_big" src="' + this.imgs_big[0] + '" width="512px" height="384px"/></div><div id="small"><div id="small_0"><img id="img_small_0" src="' + this.imgs_small[0] + '" width="170px" height="128px"/></div><div id="small_1"><img id="img_small_1" src="' + this.imgs_small[1] + '" width="170px" height="128px"/></div><div id="small_2"><img id="img_small_2" src="' + this.imgs_small[2] + '" width="170px" height="128px"/></div></div>');
			
			var self = this;
			
			$("#big").mouseover(function() {
				clearTimeout(self.timeout);
			});
			
			$("#big").mouseleave(function() {
				self.timeout = setTimeout(function () {
					self.loopImg();		
				}, 2000);
			});
			
			$("#small div").mouseover(function() {
				if (self.index != $(this).attr("id").substring(6)) {
					$(this).fadeTo(100, 1);
				}
			});
			
			$("#small div").mouseleave(function() {
				if (self.index != $(this).attr("id").substring(6)) {
					$(this).fadeTo(100, 0.5);
				}
			});
			
			$("#small div").click(function() {
				if (self.index != $(this).attr("id").substring(6)) {
					$("#small_" + self.index).fadeTo(100, 0.5);
				}
				clearTimeout(self.timeout);
				self.index = $(this).attr("id").substring(6);
				$("#img_big").attr("src", self.imgs_big[self.index]);
				$(this).fadeTo(100, 1);
				self.timeout = setTimeout(function () {
					self.loopImg();		
				}, 2000);
			});
		};
		
		imgShow.prototype.startShow = function() {
			var self = this;
			this.timeout = setTimeout(function () {
				self.loopImg();		
			}, 2000);
		};
		
		imgShow.prototype.loopImg = function() {
			$("#small_" + this.index).fadeTo(0, 0.5);
			this.index = (this.index + 1) % 3;
			$("#img_big").attr("src", this.imgs_big[this.index]);
			$("#small_" + this.index).fadeTo(0, 1);
			var self = this;
			this.timeout = setTimeout(function () {
				self.loopImg();		
			}, 2000);
		};
		
	</script>
</body>
</html>
